<template>
  <div class="header-nav-menu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      popper-class="header-home-new"
    >
        <el-sub-menu index="1">
            <template #title>{{ $t("nav.Feature") }}</template>
            <div class="header-nav-menu-item" data-div="feature">
            <div class="header-home-new1 flex justify-start items-center" id="feature">
                <div class="home-item flex-1 mr-20">
                <ul>
                    <li class="mb-14">
                    <p class="text-xl font-bold mb-4">{{ $t("nav.TravelAI") }}</p>
                    <p>
                        <router-link class="text-base font-bold" to="/AboutTravelAI">{{ $t("nav.AboutTravelAI") }}</router-link>
                        <p class="text-sm text-[#ccc]">{{ $t("nav.Resource") }}</p>
                    </p>
                    </li>
                    <li>
                    <p>
                        <router-link class="text-base font-bold" to="/Platform">{{ $t("nav.Platform") }}</router-link>
                        <p class="text-sm text-[#ccc]">{{ $t("nav.PlatformTip") }}</p>
                    </p>
                    </li>
                </ul>
                </div>
                <div class="home-item flex-1 mr-10">
                <ul>
                    <li class="mb-10">
                    <p class="text-xl font-bold mb-4 ">{{$t("nav.TicketSales")}}</p>
                    <p>
                        <router-link class="text-base font-bold" to="/AboutTicketSales">{{ $t("nav.AboutTicketSales") }}</router-link>
                        <p class="text-sm text-[#ccc]">{{ $t("nav.TicketTip") }}</p>
                    </p>
                    </li>
                    <li>
                    <p>
                        <router-link class="text-base" to="/biddingMode">{{ $t("nav.BiddingModel") }}</router-link>
                        <p class="text-sm text-[#ccc]">{{ $t("nav.BiddingModelTip") }}</p>
                    </p>
                    </li>
                </ul>
                </div>
                <div class="home-item flex-1 ml-20">
                <ul>
                    <li>
                    <p class="text-xl font-bold mb-4">{{ $t("nav.ClearingService") }}</p>
                    <p>
                        <router-link class="text-base font-bold" to="/AboutSettle">{{$t("nav.aboutClearing")}}</router-link>
                        <p class="text-sm text-[#ccc]">{{ $t("nav.aboutClearingTip") }}</p>
                    </p>
                    </li>
                </ul>
                </div>
            </div>
            </div>
        </el-sub-menu>
        <el-menu-item index="2">KVB</el-menu-item>
        <el-menu-item index="3">
          {{ $t("nav.ContactUs") }}</el-menu-item>
    </el-menu>

  </div>
</template>
<script setup>
import { ref } from 'vue'

const activeIndex = ref('1')

const handleSelect = (key, keyPath) => {
  // 联系我们
  if (key == 3) {
    window.open('https://forms.gle/LVDSGNFud5NUjA7E6')
  }
}
</script>
<style lang="scss" scoped>
.header-home-new, .header-home-new1{
  width: 100%;
  min-height: 280px;
  a{
    cursor: pointer;
  }
}

.header-nav-menu-item .header-home-new1 {
  display: flex;
  background: rgba(0, 0, 0, 1);
//   box-shadow: 0 3px 20px 4px rgba(0, 0, 0, 1), 0 6px 20px rgba(0, 0, 0, 1),
//     0 9px 28px 10px rgba(0, 0, 0, 1);
  padding: 30px 57px 30px 62px;
  .home-item {
    color: #fff;
    padding: 0 2%;
  }
}
.el-menu-demo {
  background: transparent;
  border:none;
  /* 修改 el-menu 的字体颜色 */
    .el-menu {
        color: #fff; /* 设置字体颜色 */
    }

    /* 修改 el-menu-item 的字体颜色 */
    .el-menu-item {
        color: #fff; /* 设置字体颜色 */
    }


    /* 修改 el-submenu-item 的字体颜色 */
    .el-menu-item-group__title, .el-submenu__title {
        color: #fff; /* 设置字体颜色 */
    }
}
</style>
